<template>
  <div>
    <a-modal
      title="机构地址"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="closeModel"
      :width="680"
      :bodyStyle="{ 'max-height': '70vh', 'overflow-y': 'auto' }"
    >
      <a-alert message="学员查看时以地图定位为准，请注意保持地址与地图定位一致" banner />
      <div style="margin: 15px 0">
        <v-distpicker
          @selected="onSelected"
          :province="addressInfo.province"
          :city="addressInfo.city"
          :area="addressInfo.area"
        />
        <a-textarea placeholder="请输入详细地址" :rows="3" style="width: 314px; margin-top: 15px" v-model="street" />
        <div style="margin-top: 10px">
          <a-button type="primary" @click="searchAddress">搜索</a-button>
        </div>
      </div>
      <div style="margin-top: 25px; margin-bottom: 15px">所在位置</div>
      <div id="container" v-if="isMap"></div>
    </a-modal>
  </div>
</template>

<script>
// import maps from 'qqmap'
import VDistpicker from 'v-distpicker'
import { getJD } from '@/api/map'
export default {
  // props:{
  //   province:{
  //     type:String
  //   },
  //   city:{
  //     type:String
  //   },
  //   area:{
  //     type:String
  //   },
  //   street:{
  //     type:String
  //   }
  // },
  components: { VDistpicker },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      map: {},
      markerLayer: undefined,
      latLng: undefined,
      formInfo: {},
      address: '',
      street: '',
      lat: 39.916527,
      lng: 116.397128,
      map: null,
      addressInfo: {
        province: '',
        city: '',
        area: '',
      },
      isMap:true,
      type:1,
      index:undefined,
      marker:undefined
    }
  },
  methods: {
    init() {
      setTimeout(()=>{
        this.map = new qq.maps.Map(document.getElementById('container'), {
        center: new qq.maps.LatLng(this.lat, this.lng),
        zoom: 14,
      })
      this.marker = new qq.maps.Marker({
        //设置Marker的位置坐标
        position: new qq.maps.LatLng(this.lat, this.lng),
        draggable: true,
        //设置显示Marker的地图
        map: this.map,
      })
      //设置Marker的可见性，为true时可见,false时不可见，默认属性为true
      this.marker.setVisible(true)
      },500)
    },
    onSelected(data) {
      console.log(data)
      this.address = data.province.value + data.city.value + data.area.value
      this.addressInfo.area=data.area.value
      this.addressInfo.province=data.province.value
      this.addressInfo.city=data.city.value
      
    },
    getJWdOne(address){
      
      getJD({ address: address })
        .then((res) => {
          this.lat = res.location.lat
          this.lng = res.location.lng
          this.addressInfo.province = res.address_components.province
          this.addressInfo.city = res.address_components.city
          this.addressInfo.area = res.address_components.district
          this.init()
           this.isMap=true
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },
    getJWd(address) {
      getJD({ address: address })
        .then((res) => {
          // if(!this.lat){
          //   this.lat = res.location.lat
          //   this.lng = res.location.lng
          // }
          this.addressInfo.province = res.address_components.province
          this.addressInfo.city = res.address_components.city
          this.addressInfo.area = res.address_components.district
          this.init()
           this.isMap=true
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },

    searchAddress() {
      if (this.address == '') {
        this.$message.warning('请选择地址')
        return
      } else {
        this.address = this.address + this.street
      }
      this.getJWdOne(this.address)
      this.isMap=true
    },
    showModel(data=undefined) {
      if(data&&data.lat){
        this.lat = data.lat
        this.lng = data.lng
        this.street=data.street
      }
      if(data&&data.address){
        this.getJWd(data.address)
      }else{
          this.addressInfo = {
          province: '',
          city: '',
          area: '',
        }
        this.isMap=false
      }
      
      // if (address) {
      //   this.street = street
      //   // this.getJWd(address)
      // } else {
      //   // this.visible = true
      //   this.isMap=false
      //   this.addressInfo = {
      //     province: '',
      //     city: '',
      //     area: '',
      //   }
      //   this.street=''
      // }
       this.visible = true
    },
    handleOk() {
      console.log(this.addressInfo)
      if(this.addressInfo.area==''||this.addressInfo.province==''||this.addressInfo.city==''){
         this.$message.warning('请选择地址')
        return
      }
      this.addressInfo.street = this.street
      this.addressInfo.type=this.type
      if(this.index!=undefined){
        this.addressInfo.index=this.index
      }
     /* console.log(this.addressInfo)
     return */
     if(this.marker){
       let position=this.marker.getPosition()
      // console.log(a.lat);
      // return
      // debugger
      this.addressInfo.lat=position.lat
      this.addressInfo.lng=position.lng
     }
      
      
      this.$emit('finish', this.addressInfo)
      this.visible = false
    },
    closeModel() {
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  width: 100%;
  height: 260px;
}
</style>